<template>
  <div class="login_container">
    <canvas ref="canvas" class="canvas"> </canvas>
  </div>
</template>

<script>
class Snowflake {
  constructor(x, y, speed, radius) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.radius = radius;
  }
  update() {
    this.y += this.speed;
    if (this.y > window.innerHeight) {
      this.y = -this.radius;
    }
  }
  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = '#fff';
    ctx.fill();
  }
}


export default {
  components:{
  },
  data(){
    return{
      snowflakes: [],
    }
  },
  created() {

  },


  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    window.addEventListener('resize', () => {
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
    });
    this.animate();

  },
  methods:{
    animate() {
      this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
      if (Math.random() < 0.05) {
        const x = Math.random() * window.innerWidth;
        const y = -10;
        const speed = Math.random() * 3 + 1;
        const radius = Math.random() * 3 + 1;
        this.snowflakes.push(new Snowflake(x, y, speed, radius));
      }
      this.snowflakes.forEach((snowflake) => {
        snowflake.update();
        snowflake.draw(this.ctx);
      });
      requestAnimationFrame(this.animate);
    },
  }
}
</script>

<style lang="less" scoped>
.login_container{
  height: 100% ;
}
.canvas {
  position: fixed;
  top: 0;
  left: 0;
}
</style>
